import React from 'react'
import { Card, message } from 'antd'
import ModalEdit from './ModalEdit'
import TableX from 'components/TableX'
import Options from 'components/TableX/Options'
import PageWrapper from 'components/PageWrapper'
import axios from 'axios'
import { checkres, session } from 'utils'
import { SERVER, SERVER_ADMIN } from 'configs/service'

export default function Prompt() {
  const recordRef = React.useRef({})
  const tableXRef = React.useRef()
  const paramsRef = React.useRef()
  const [modalEdit, setModalEdit] = React.useState({ visible: false })
  const [regionData, setRegionData] = React.useState([])

  function ToTree(data, id = 0) {
    return data
      .filter(v => v.pid === id)
      .map(v => {
        const children = ToTree(data, v.id)
        if (!children.length) return v
        return { ...v, children }
      })
  }

  React.useEffect(() => {
    axios.post('/region/list', {}, { baseURL: SERVER_ADMIN }).then(res => {
      if (res.data.code === 1) {
        const { data } = res.data
        const tree = ToTree(
          data.map(v => ({ ...v, label: v.name, value: v.id.toString() }))
        )
        setRegionData(tree)
      } else {
        message.error(res.data.msg)
      }
    })
  }, [])

  function request({ pageIndex, pageSize, fields = {} }) {
    paramsRef.current = { pageIndex, pageSize, ...fields }
    return axios
      .post('/chip/queryAllChip', { pageIndex, pageSize, ...fields })
      .then(res => {
        if (!checkres(res)) return []
        return {
          list: res.data.data.records,
          total: res.data.data.total,
        }
      })
  }

  return (
    <PageWrapper>
      <Card>
        <ModalEdit
          regionData={regionData}
          record={recordRef.current}
          onOk={() => tableXRef.current.update()}
          onCancel={() => setModalEdit({ visible: false })}
          {...modalEdit}
        />
        <TableX
          rowKey="id"
          ref={tableXRef}
          request={request}
          toolbarButtons={[
            {
              preset: 'add',
              onClick: () => setModalEdit({ mode: 'add', visible: true }),
            },
          ]}
          columns={[
            { dataIndex: 'chipModel', title: '芯片型号' },
            { dataIndex: 'departmentName', title: '供应商' },
            {
              dataIndex: 'chipFile',
              title: '芯片资质文件',
              render: v =>
                v == null ? (
                  '暂无附件'
                ) : (
                  <a
                    href={`${SERVER}/uploadFile/base64Read?id=${v}&Authorization=${session.Authorization}`}
                  >
                    点击下载
                  </a>
                ),
            },
            {
              dataIndex: 'options',
              title: <span style={{ marginRight: 8 }}>操作</span>,
              render: (v, o) => (
                <Options
                  buttons={[
                    {
                      preset: 'edit',
                      onClick: () => {
                        recordRef.current = o
                        setModalEdit({ mode: 'update', visible: true })
                      },
                    },
                    {
                      preset: 'del',
                      onClick: () => {
                        axios
                          .get('/chip/deleteChip', {
                            params: { chipIds: o.id },
                          })
                          .then(res => {
                            if (res.data.code === 1) {
                              message.success('删除成功')
                              tableXRef.current.update()
                            } else {
                              message.error(res.data.msg)
                            }
                          })
                      },
                    },
                  ]}
                ></Options>
              ),
            },
          ]}
        />
      </Card>
    </PageWrapper>
  )
}
